<template>
	<view class="page">
		<u-navbar title="新增员工" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<view class="body">
			<scroll-view scroll-y="true" style="height: 100%;">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="角色:" prop="role_ids" borderBottom>
						<view @click="roleShow=true">
							<view v-if="!form.role_ids.length">
								请选择角色
							</view>
							<view class="tagBox">
								<u-tag v-for="item in roles" :key="item.id" :text="item.display_name" size="mini"
									closable @close="delTag(item.id)"></u-tag>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="浏览用户:" prop="user_id" borderBottom>
						<view @click="userShow=true">
							<view v-if="!form.user_id">
								请选择浏览用户
							</view>
							<view v-else class="userBox">
								<u-avatar :src='user.avatar' size='40rpx' />
								<view>
									<u-text :lines='1' :text='user.nick_name' size='24rpx' />
								</view>
							</view>
						</view>
					</u-form-item>
				</u--form>
			</scroll-view>
		</view>
		<view>
			<selectRole :show='roleShow' @close='roleShow=false' :role_ids='form.role_ids' @selectRole='selectRole' />
			<selectMumber :show='userShow' @close='userShow=false' @selectUser='selectUser' />
		</view>
		<view >
			<u-button @click='submit' :disabled="disabled">新增</u-button>
		</view>
	</view>
</template>

<script>
	import selectRole from './components/selectRole'
	import selectMumber from './components/selectMumber'
	export default {
		components: {
			selectRole,
			selectMumber
		},
		data() {
			return {
				form: {
					role_ids: [],
					user_id: null
				},
				rules: {
					'role_ids': {
						type: 'array',
						required: true,
						message: '请选择角色',
						trigger: ['blur', 'change']
					},
					'user_id': {
						type: 'number',
						required: true,
						message: '请选择浏览用户',
						trigger: ['blur', 'change']
					},
				},
				roles: [],
				user: {
					nick_name: '',
					avatar: ''
				},
				userShow: false,
				roleShow: false,
				disabled:false
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			selectRole(e) {
				this.roles.push(...e)
				this.form.role_ids.push( ...e.map(item => item.id))
			},
			delTag(id) {
				this.form.role_ids = this.form.role_ids.filter(item => item != id)
				this.roles = this.roles.filter(item => item.id != id)
			},
			selectUser(e) {
				this.user = {
					nick_name: e.user.nick_name,
					avatar: e.user.avatar
				}
				this.form.user_id = e.user_id
			},
			submit(){
				console.log(this.form)
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title:'新增中...'
					})
					this.disabled=true
					this.$api_company.Administrator.Add(this.form).then(res=>{
						uni.reLaunch({
							url:'/administrator/index'
						})
						uni.hideLoading()
						this.disabled=false
					}).catch(err=>{
						uni.hideLoading()
						uni.$u.toast(err.message)
						this.disabled=false
					})
				}).catch(errors => {
					uni.$u.toast('请输入完整信息')
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.body {
		flex: 1;
		margin-top: 20rpx;
	}

	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx 0;

		view:nth-child(2) {
			flex: 0.98;
		}
	}

	.tagBox {
		display: flex;

		>view {
			margin-right: 10rpx;
		}
	}
</style>